<template>
	<view>
		<view class="time_box">
			<view class="time_box_top">
				<view class="recode_top">
					<view class="recode_top_left recode_top_item">
						<view class="uni-list-cell-db">
							<picker mode="date" :value="date1" @change="bindDateChange1">
								<view class="uni-input txt_time">{{date1}}</view>
							</picker>
						</view>
					</view>
					<text class="recode_top_center">至</text>
					<view class="recode_top_right recode_top_item">
						<view class="uni-list-cell-db">
							<picker mode="date" :value="date" @change="bindDateChange">
								<view class="uni-input txt_time">{{date}}</view>
							</picker>
						</view>
					</view>
				</view>
				<text class="timeQuery" @click="queryPay">查询</text>
			</view>
		</view>
		<view class="recode_container">
			<view v-if="recodeLists.length > 0">
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper" @scrolltolower="lower"
				@scroll="scroll">
					<view id="demo1" v-for="(item, index) in recodeLists" v-bind:key="index">
						<view class="scroll_top">
							<text class="scroll_title">{{item.channelId == 200 ? '微信' : item.channelId == 300 ? '支付宝' : ''}} - 卡充值</text>
							<text class="scroll_time" v-if="item.payState == 0" :style="{color: item.payState == 1 ? '#FA6400' : item.payState == 0 ? 'green' : 'black'}">{{item.payMsg}}</text>
						</view>
						<view class="txt_box">
							<view class="scroll_bottom">
								<text class="scroll_type">卡号：{{item.cardNo}}</text>
								<text class="scroll_type">支付金额：{{Number(item.amount).toFixed(2)}}</text>
								<text class="scroll_type">充值时间：{{item.billTime}}</text>
							</view>
							<view v-if="item.payState == 1">
								<!-- <text class="liji">立即支付</text> -->
							</view>
						</view>
					</view>
					<view class="less_txt">
						<text class="scroll_time">没有更多数据啦~</text>
					</view>
				</scroll-view>
			</view>
			<view class="no_content" v-else>
				<text class="stu_item_txt" style="color: #D9D9D9;">目前还没有充值记录!</text>
			</view>
		</view>
		<mcModal :isShow="showMcModal" :content="content" :title="title" :showCancel="false" :inp="false" @ok='cc()' okBtn='确定'></mcModal>
	</view>
</template>

<script>
	import {getMilkPayChannel, payList, payMilkList} from '../../common/api/index'
	import mcModal from '../../components/custom-modal/custom-modal.vue'
	export default {
		components: {
			mcModal
		},
	    data() {
	        const currentDate = this.getDate({
	            format: true
	        })
			const currentDate1 = this.getDate1({
			    format: true
			})
			console.log(currentDate1)
	        return {
	            date: currentDate,
	            date1: currentDate1,
				scrollTop: 0,
				recodeObj: {},
				recodeLists: [],
				walletId: '',
				accountId: '',
				orgId: '',
				walletObj: {},
				list: [],
				portalCode: '',
				showMcModal: false,
				content: '',
				title: '',
	        }
	    },
		onLoad: function (option) {
			this.walletObj = {...JSON.parse(decodeURIComponent(option.walletObj))}
			// #ifdef APP-PLUS
			switch (uni.getSystemInfoSync().platform) {
			  case 'android':
			    console.log('运行Android上')
			    this.portalCode = 'POC_APP_ANDRIOD'
			    break;
			  case 'ios':
			    console.log('运行iOS上')
			    this.portalCode = 'POC_APP_APPLE'
			    break;
			  default:
			    console.log('运行在开发者工具上')
			    break;
			}
			// #endif
			this.getPayList()
			
		},
	    methods: {
			cc() {
				this.showMcModal = false
				uni.reLaunch({
					url: '/pageMilk/index/index'
				})
			},
			bindDateChange1: function(e) {
				this.date1 = e.target.value
				this.date1 = this.date1.toString().replace(/\//g, "-")
			},
			queryPay() {
				this._queryRecode()
			},
			getPayList() {
				getMilkPayChannel({
					orgId: this.walletObj.orgId,
					// #ifdef MP-ALIPAY
					portalCode: 'POC_ZFB_APPLET'
					// #endif
					// #ifdef H5
					portalCode: 'POC_WX_OPENPLAFORM'
					// #endif
					// #ifdef MP-WEIXIN
					portalCode: 'POC_WX_APPLET'
					// #endif
					// #ifdef APP-PLUS
					portalCode: this.portalCode
					// #endif
				}).then( res => {
					if(res.code == 0) {
						if(res.data.length == 0) {
							this.title = '温馨提示'
							this.content = '获取支付渠道失败，请配置支付渠道！'
							this.showMcModal = true
						} else {
							this.list = res.data
							this._queryRecode()
						}
					} else {
						uni.hideLoading()
					}
				}).catch( err => {
					uni.hideLoading()
					console.log(err)
				})
			},
			_queryRecode() {
				uni.showLoading({
					title: '加载中...'
				})
				payMilkList([{
				// #ifdef MP-ALIPAY
				channelCode: 'CHNL_ZFB',
				// #endif
				// #ifdef H5
				channelCode: 'CHNL_WX',
				// #endif
				// #ifdef MP-WEIXIN
				channelCode: 'CHNL_WX',
				// #endif
				// #ifdef APP-PLUS
				portalCode: this.portalCode,
				// #endif
				msgId: this.walletObj.msgId,
				billNo: this.walletObj.clientBillNo,
				orgId: this.walletObj.orgId,
				walletId: this.walletObj.walletId,
				payerAccount: this.walletObj.payerAccount == null ? this.walletObj.cardNo : this.walletObj.payerAccount,
				channelId: uni.getSystemInfoSync().platform == 'android' ? '' : this.list[0].channelId,
				startTime: this.date1 + " 00:00:00",
				endTime: this.date + " 23:59:59",
				currentPage: 1,
				pageSize: 300}]).then( res => {
					if(res.code == 0) {
						this.recodeLists = res.data.filter(item => item.payState == 0)
						uni.hideLoading()
					} else {
						uni.hideLoading()
					}
				}).catch(err=>{
					uni.hideLoading()
					console.log(err)
				})
			},
			upper: function(e) {
			},
			lower: function(e) {
			},
			scroll: function(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
	        bindDateChange: function(e) {
	            this.date = e.target.value
				this.date = this.date.toString().replace(/\//g, "-")
	        },
	        getDate(type) {
	            const date = new Date();
	            let year = date.getFullYear();
	            let month = date.getMonth() + 1;
	            let day = date.getDate();
				
	            month = month > 9 ? month : '0' + month;;
	            day = day > 9 ? day : '0' + day;
	            return `${year}-${month}-${day}`;
	        },
			getDate1(type) {
			    const date = new Date();
			    let year = date.getFullYear();
			    let month = date.getMonth() + 1;
			    let day = date.getDate();
				
			    month = month > 9 ? month : '0' + month;;
			    day = day > 9 ? day : '0' + day;
			    return `${year}-${month}-${day}`;
			}
	    }
	}
</script>

<style lang="scss">
	page {
		background-color: #F6F6F6;
	}
	.recode_container {
		padding: 0 25rpx;
		margin-top: 20rpx;
	}
	.time_box {
		padding: 0 20rpx;
		margin-top: 20rpx;
	}
	.time_box_top {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		background-color: #ffffff;
		padding: 0 20rpx;
		height: 96rpx;
	}
	.stu_item_txt {
		font-family: 'Arial Normal', 'Arial';
		font-weight: 400;
		font-size: 26rpx;
		color: #3A7AC7;
	}
	.recode_top {
		width: 70%;
		display: flex;
		flex-direction: row;
		align-items: center;
		background: #FFFFFF;
		border-radius: 8rpx;
	}
	.recode_top_center {
		font-family: 'Arial Normal', 'Arial';
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
	}
	.recode_top_item {
		display: flex;
		flex: 1;
		justify-content: center;
	}
	.scroll_top {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		line-height: 60rpx;
	}
	.scroll_title {
		font-size: 32rpx;
		font-family: "PingFangSC-Semibold, PingFang SC";
		font-weight: 600;
		color: #3C424F;
	}
	.scroll_moeny {
		font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
		font-weight: 700;
		font-size: 28rpx;
		color: #555555;
	}
	.timeQuery {
		font-size: 28rpx;
		font-family: "PingFang-SC-Medium, PingFang-SC";
		font-weight: 500;
		color: #FFFFFF;
		background: #185AFF;
		border-radius: 8rpx;
		padding: 12rpx 24rpx;
	}
	.scroll_bottom {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		line-height: 40rpx;
	}
	.less_txt {
		height: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	#demo1 {
		padding: 20rpx;
		background: #FFFFFF;
		box-shadow: 0px 8px 12px 0px rgba(0, 0, 0, 0.05);
		border-radius: 8rpx;
		margin-bottom: 20rpx;
	}
	.scroll_type {
		font-family: 'Arial Normal', 'Arial';
		font-weight: 400;
		font-size: $font-size-base;
		color: #AAAAAA;
		padding: 5rpx 0;
	}
	.scroll_time {
		font-size: 28rpx;
		font-family: "PingFangSC-Medium, PingFang SC";
		font-weight: 500;
		color: #3C424F;
	}
	.txt_box {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.liji {
		background: #185AFF;
		border-radius: 8rpx;
		font-size: $font-size-base;
		font-family: "PingFang-SC-Medium, PingFang-SC";
		font-weight: 500;
		color: #FFFFFF;
		padding: 10rpx 20rpx;
	}
	.no_content {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20rpx 0;
	}
	.txt_time {
		color: #169BD5;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.uni-input {
		font-size: 28rpx;
	}
</style>
